<template>
  <div>
    <!-- 顶部横向bar -->
    <div class="global-header-bar">
      <div class="header-left">
        <img src="../assets/zjjxh.png" alt="项目Logo" class="project-logo" />
        <span class="project-title">张家界学院管理系统</span>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleDropdownCommand">
          <span class="el-dropdown-link">
            管理员 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <el-container style="height: 100vh; margin-top: 70px;">
      <el-aside width="240px" class="campus-aside" style="padding: 0;">
        <el-menu :default-active="$route.path" router class="campus-menu">
          <el-menu-item index="/dashboard" route="/dashboard">
            <i class="el-icon-house"></i>
            <span>仪表盘</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/faq-management" route="/dashboard/faq-management">
            <i class="el-icon-document"></i>
            <span>常见问题管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/article-management" route="/dashboard/article-management">
            <i class="el-icon-edit"></i>
            <span>文章信息发布管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/article-type-management" route="/dashboard/article-type-management">
            <i class="el-icon-s-order"></i>
            <span>发布类型管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/recruitment-plan" route="/dashboard/recruitment-plan">
            <i class="el-icon-s-grid"></i>
            <span>招生计划管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/banner-management" route="/dashboard/banner-management">
            <i class="el-icon-picture"></i>
            <span>首页轮播图管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/basic-info-management" route="/dashboard/basic-info-management">
            <i class="el-icon-setting"></i>
            <span>基础信息管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/score-data-management" route="/dashboard/score-data-management">
            <i class="el-icon-data-analysis"></i>
            <span>历年投档线管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/department-management" route="/dashboard/department-management">
            <i class="el-icon-office-building"></i>
            <span>院系管理</span>
          </el-menu-item>
          <el-menu-item index="/dashboard/major-management" route="/dashboard/major-management">
            <i class="el-icon-collection"></i>
            <span>专业管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
       
        <el-main>
          <div v-if="$route.path === '/dashboard'" class="dashboard-welcome campus-welcome">
            <img src="../assets/zjjxh.png" class="dashboard-banner" alt="校园图片" />
            <h1>欢迎来到校园管理后台</h1>
            <p class="dashboard-desc">本系统为校园信息化管理平台，您可以在左侧菜单中进行各类信息的维护和管理：</p>
            <ul class="dashboard-feature-list">
              <li><b>常见问题管理：</b> 维护校园常见问题及解答，便于新生和家长快速了解。</li>
              <li><b>文章信息发布管理：</b> 发布校园新闻、通知、活动等信息。</li>
              <li><b>发布类型管理：</b> 管理新闻、公告等信息类型。</li>
              <li><b>招生计划管理：</b> 管理各年度招生计划及相关政策。</li>
              <li><b>首页轮播图管理：</b> 维护首页展示的轮播图片。</li>
              <li><b>基础信息管理：</b> 维护学校基本信息、联系方式等。</li>
              <li><b>历年投档线管理：</b> 录入和查询历年各专业投档线数据。</li>
              <li><b>院系管理：</b> 管理学校各院系信息。</li>
              <li><b>专业管理：</b> 管理各院系下的专业设置。</li>
            </ul>
            <div class="dashboard-stats-bar">
              <el-card class="stats-card" shadow="never">
                <div class="stats-list">
                  <div class="stats-item">
                    <div class="stats-icon stats-icon-blue"><i class="el-icon-document"></i></div>
                    <div class="stats-value">{{ stats.total || 0 }}</div>
                    <div class="stats-label">文章总数</div>
                  </div>
                  <div class="stats-item">
                    <div class="stats-icon stats-icon-green"><i class="el-icon-view"></i></div>
                    <div class="stats-value">{{ stats.totalViewCount || 0 }}</div>
                    <div class="stats-label">总浏览量</div>
                  </div>
                  <div class="stats-item">
                    <div class="stats-icon stats-icon-orange"><i class="el-icon-view"></i></div>
                    <div class="stats-value">
                      <span v-if="statsLoading"><i class="el-icon-loading"></i></span>
                      <span v-else>{{ stats.todayViewCount || 0 }}</span>
                    </div>
                    <div class="stats-label">今日浏览量</div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <router-view v-else />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'DashboardPage',
  data() {
    return {
      stats: {
        total: 0,
        totalViewCount: 0,
        todayViewCount: 0
      },
      statsLoading: false
    };
  },
  methods: {
    handleDropdownCommand(command) {
      if (command === 'logout') {
        this.handleLogout();
      }
    },
    handleLogout() {
      // 清除 token 或其他登录信息
      localStorage.removeItem('token');
      
      // 跳转到登录页
      this.$router.push('/login');
    },
    fetchStats() {
      this.statsLoading = true;
      axios.get('/api/admin/article/stats')
        .then(response => {
          if (response.data.code === 200) {
            this.stats = response.data.data || { total: 0, totalViewCount: 0, todayViewCount: 0 };
          }
        })
        .catch(() => {})
        .finally(() => {
          this.statsLoading = false;
        });
    }
  },
  created() {
    this.fetchStats();
  }
};
</script>

<style scoped>
.global-header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: #e0f7fa;
  border-bottom: 1px solid #d0ece7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding: 0 32px;
}
.header-left {
  display: flex;
  align-items: center;
}
.project-logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  object-fit: contain;
}
.project-title {
  font-size: 20px;
  color: #3c6e54;
  font-weight: bold;
  white-space: nowrap;
}
.header-right {
  display: flex;
  align-items: center;
  padding-right: 80px;
  font-weight: bold;
}
.campus-aside {
  border-right: solid 1px #ebedf0;
  background: linear-gradient(180deg, #e0f7fa 0%, #f4f9f6 100%);
  position: relative;
  padding-top: 0;
}
.campus-header {
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background: #e0f7fa;
  border-bottom: 1px solid #d0ece7;
}
.campus-admin-bar {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  background: #e0f7fa;
  border-bottom: 1px solid #d0ece7;
  font-size: 15px;
  font-weight: 600;
  color: #3c6e54;
}
.campus-menu {
  background: transparent;
  border-right: none;
}
.campus-menu .el-menu-item {
  font-size: 16px;
  color: #3c6e54;
  border-radius: 8px;
  margin: 4px 8px;
  transition: background 0.2s, color 0.2s;
}
.campus-menu .el-menu-item.is-active,
.campus-menu .el-menu-item:hover {
  background: linear-gradient(90deg, #3c6e54 0%, #4fd1c5 100%);
  color: #fff !important;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(60,110,84,0.08);
}
.dashboard-welcome.campus-welcome {
  background: #f4f9f6;
  border-radius: 18px;
  padding: 40px 40px 32px 40px;
  margin: 0 auto;
  max-width: 820px;
  box-shadow: 0 8px 32px 0 rgba(60,110,84,0.10);
  text-align: center;
  margin-top: 32px;
}
.dashboard-banner {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 18px;
  background: #e0f7fa;
  box-shadow: 0 2px 8px rgba(60,110,84,0.10);
}
.dashboard-welcome h1 {
  color: #3c6e54;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.dashboard-desc {
  color: #4fd1c5;
  font-size: 18px;
  margin-bottom: 18px;
}
.dashboard-feature-list {
  text-align: left;
  margin: 0 auto;
  max-width: 600px;
  color: #3c6e54;
  font-size: 16px;
  line-height: 2;
  padding-left: 0;
}
.dashboard-feature-list li {
  list-style: disc inside;
  margin-bottom: 4px;
}
/* 统计区块美化 */
.dashboard-stats-bar {
  margin: 32px auto 0 auto;
  max-width: 700px;
  display: flex;
  justify-content: center;
}
.stats-card {
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(60,110,84,0.08);
  padding: 24px 32px 18px 32px;
}
.stats-list {
  display: flex;
  justify-content: center;
  gap: 48px;
}
.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}
.stats-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 10px;
  color: #fff;
}
.stats-icon-blue {
  background: linear-gradient(135deg, #409EFF 60%, #6ec6ff 100%);
}
.stats-icon-green {
  background: linear-gradient(135deg, #67c23a 60%, #b2e59f 100%);
}
.stats-icon-orange {
  background: linear-gradient(135deg, #e6a23c 60%, #ffd591 100%);
}
.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
  min-height: 32px;
}
.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 2px;
}
</style>